<template>
  <div class="app-container">
    <el-card shadow="always" style="margin-top: 1%">
      <div slot="header" class="clearfix">
        <span>表基础信息</span>
      </div>
      <el-form ref="form" :rules="rules" :model="form" label-width="150px" style="margin-top: 2%">
        <div
          style="display: flex;flex-direction: row;align-items: center;justify-content: space-around;margin-left: 10%;margin-right: 10%">
          <el-form-item label="表中文名称" prop="tableName">
            <el-input v-model="form.tableName" size="small" style="width: 200px"
                      placeholder="请输入表中文名称(示例:用户表)"></el-input>
          </el-form-item>
          <el-form-item label="表英文名称" prop="tableEnName">
            <el-input v-model="form.tableEnName" size="small" style="width: 200px"
                      placeholder="请输入英文表名称(t_test)"></el-input>
          </el-form-item>
          <el-form-item label="是否生成基础字段">
            <el-radio-group v-model="form.genBaseField" size="small">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
            </el-radio-group>
          </el-form-item>
        </div>

      </el-form>
    </el-card>


    <el-button
      type="primary"
      icon="el-icon-plus"
      size="mini"
      style="margin-top: 1%"
      @click="handleAdd"
    >
      新增行
    </el-button>
    <el-table
      v-loading="loading"

      :data="tableData" row-key="id"
      :header-cell-style="{'text-align':'center','color':'grey','font-weight':'600'}"
      :cell-style="{'text-align':'center'}" border style="margin-top: 1%"
    >
      <el-table-column v-for="column in tableColumns" :key="column.prop" :label="column.label">
        <template slot-scope="scope">
          <el-input size="mini" v-show="column.prop !== 'fieldType' && column.prop !== 'defaultNull'"
                    v-model="scope.row[column.prop]"
                    :placeholder="column.placeholder"></el-input>

          <el-select size="mini" v-show="column.prop ==='fieldType'" v-model="scope.row.fieldType"
                     placeholder="请选择" @change="handleFieldTypeChange(scope.row)">
            <el-option label="字符串" value="STRING"></el-option>
            <el-option label="小整形" value="TINYINT"></el-option>
            <el-option label="整形" value="INT"></el-option>
            <el-option label="长整形" value="BIGINT"></el-option>
            <el-option label="浮点型" value="BIGDECIMAL"></el-option>
            <el-option label="文本" value="TEXT"></el-option>
            <el-option label="文本域" value="TEXTAREA"></el-option>
            <el-option label="时间" value="LOCALDATETIME"></el-option>
          </el-select>


          <el-select size="mini" v-show="column.prop ==='defaultNull'" v-model="scope.row.defaultNull"
                     placeholder="请选择是否允许为空">
            <el-option label="是" value="true"></el-option>
            <el-option label="否" value="false"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="info" icon="el-icon-delete" @click="handleDelete(scope.$index)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <div style="text-align: center;margin-top: 2%">
      <el-button size="small" type="danger" icon="el-icon-delete" @click="emptyTable">清空表格</el-button>
      <el-button size="small" type="primary" icon="el-icon-plus" @click="createTable">一键建表</el-button>
    </div>

  </div>
</template>

<script>
import { createTable } from '@/api/tool/gen'
import importTable from './importTable'

export default {
  name: 'Gen',
  components: { importTable },
  data() {

    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      cloumns: [],
      form: {
        genBaseField: '是'
      },
      tableHeight: document.documentElement.scrollHeight - 245 + 'px',
      tableData: [
        {
          fieldName: '名称',
          fieldType: 'STRING',
          fieldLength: 255,
          defaultNull: 'true',
          defaultValue: '',
          sort: '1'
        }
      ],
      rules: {
        tableName: [
          { required: true, message: '请输入表中文名称', trigger: 'blur' }
        ],
        tableEnName: [
          { required: true, message: '请输入表英文名称', trigger: 'blur' }
        ]

      },
      tableColumns: [
        { label: '字段名称', prop: 'fieldName', placeholder: '请输入字段名称(中文)' },
        { label: '字段类型', prop: 'fieldType', placeholder: '请选择字段类型' },
        { label: '字段长度', prop: 'fieldLength', placeholder: '请输入字段长度' },
        { label: '是否允许为空', prop: 'defaultNull', placeholder: '请选择是否为空' },
        { label: '字段默认值', prop: 'defaultValue', placeholder: '请输入字段默认值' },
        { label: '字段排序', prop: 'sort', placeholder: '请输入字段排序' }
      ]

    }
  },
  created() {
    this.getList()
  },
  activated() {
    const time = this.$route.query.t
    if (time != null && time !== this.uniqueId) {
      this.uniqueId = time
      this.resetQuery()
    }
  },
  methods: {
    handleFieldTypeChange(row) {
      if (row.fieldType === 'INT') {
        row.fieldLength = 11
      } else if (row.fieldType === 'STRING') {
        row.fieldLength = 255
      } else if (row.fieldType === 'TINYINT') {
        row.fieldLength = 4
      } else if (row.fieldType === 'BIGINT') {
        row.fieldLength = 20
      } else if (row.fieldType === 'BIGDECIMAL') {
        row.fieldLength = 2
      } else if (row.fieldType === 'TEXTAREA') {
        row.fieldLength = 2000
      } else {
        row.fieldLength = ''
      }
    },

    createTable() {

      let params = {}
      if (!this.form.tableName) {
        this.$notify({
          title: '失败',
          message: '请输入表中文名称',
          type: 'error'
        })
        return
      }
      if (!this.form.tableEnName) {
        this.$notify({
          title: '失败',
          message: '请输入表英文名称',
          type: 'error'
        })
        return
      }
      params.tableName = this.form.tableName
      params.tableEnName = this.form.tableEnName
      params.genBaseField = this.form.genBaseField === '是'
      params.fieldRequestList = this.tableData
      createTable(params).then(res => {
        if (res.code === 200) {
          this.$notify({
            title: '成功',
            message: '建表成功',
            type: 'success'
          })
        }
      })

    },
    emptyTable() {
      this.tableData = []
    },
    handleAdd() {
      // 新增一行
      this.tableData.push({
        fieldName: '',
        fieldType: 'STRING',
        fieldLength: 255,
        defaultNull: 'true',
        defaultValue: '',
        sort: this.tableData.length + 1,
        fieldComment: ''
      })
    },
    handleDelete(index) {
      // 删除指定行
      this.tableData.splice(index, 1)
    }

  }
}
</script>
